<template>
  <div class="w-checkbox-group" v-if="checkboxInline">
    <label class="checkbox-inline" v-for="(index, item) of checkboxItems">
      <input type="checkbox" :id="item.id"
             :value="item.value"
             :disabled="item.disabled"
             :checked="item.checked"
             @change="onCheckItems(item, index, $event)">
      {{ item.label }}
    </label>
  </div>
  <div class="w-checkbox-group" v-else>
    <div class="checkbox" v-for="(index, item) of checkboxItems">
      <label>
        <input type="checkbox" :id="item.id"
               :value="item.value"
               :disabled="item.disabled"
               :checked="item.checked"
               @change="onCheckItems(item, index, $event)">
        {{ item.label }}
      </label>
    </div>
  </div>
</template>

<script type='text/babel'>
  export default {
    props: {
      checkboxItems: Array,
      checkboxInline: Boolean,
      checkboxCurrentCheckedItems: Array
    },
    methods: {
      onCheckItems: function (store, item, index, event) {
        var self = this
        var value = event.target.value
        var checked = event.target.checked
        let len = self.checkboxItems.length
        for (let i = 0; i < len; i++) {
          if ('' + self.checkboxItems[i].value === value) {
            self.checkboxItems[i].checked = checked
            break
          }
        }
        self.checkboxCurrentCheckedItems = []
        self.checkboxItems.forEach(function (item) {
          if (item.checked) {
            self.checkboxCurrentCheckedItems.push(item)
          }
        })
        self.$dispatch('ON_CHECKBOX_CHECK_ITEMS', self, index, self.groupButtons, event)
        if (self.$store) {
          self.$store.dispatch('ON_CHECKBOX_CHECK_ITEMS', self, self.checkboxCurrentCheckedItems, event)
        }
      }
    }
  }
</script>

<style lang='less'>
</style>
